import React from 'react'
import {
  Paper,
  List,
  ListItem,
  Card,
  TextField,
  RaisedButton,
} from 'material-ui'
import io from 'socket.io-client'
const socket = io('http://127.0.0.1:3302')

let count = 1

class TopicList extends React.Component {
  constructor() {
    super()
    this.state = {
      list: [9]
    }
  }

  addListenMsg = () => {
    socket.on('get', (data) => {
      this.state.list.push(data)
      this.setState({
        list: this.state.list
      })
    })
  }

  sendMsg = () => {
    socket.emit('add', count++)
  }

  componentWillMount() {
    this.addListenMsg()
  }

  render() {
    return (
      <Paper>
        <Card>
          <TextField
            hintText="Hint Text"
          />
          <br/>
          <RaisedButton
            label="点击"
            primary={true}
            onClick={this.sendMsg}
          />
        </Card>
        <List>
          {
            this.state.list.map((item, key) => {
              return(
                <ListItem
                  key={key}
                  primaryText={item}
                />
              )
            })
          }
        </List>
      </Paper>
    )
  }
}

export default TopicList
